<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="orderInfoList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
              type="index"
              label="序号"
              width="50"
              align="center">
      </el-table-column>
      <el-table-column
              prop="productName"
              label="商品名称"
              align="center">
      </el-table-column>
      <el-table-column
              prop="barCode"
              label="商品编号"
              align="center"
              width="150">
      </el-table-column>
      <el-table-column
              prop="spec"
              label="规格"
              align="center"
              width="80">
      </el-table-column>
      <el-table-column
              prop="form"
              :formatter="shopTypes"
              label="商品类型"
              align="center"
              width="80">
      </el-table-column>
      <el-table-column
              prop="sellPrice"
              :formatter="fen2Yuan"
              label="单价(元)"
              align="center"
              width="80">
      </el-table-column>
      <el-table-column
              prop="disPrice"
              :formatter="fen2Yuan"
              label="优惠价(元)"
              align="center"
              width="90">
      </el-table-column>
      <el-table-column
              prop="buyNum"
              :formatter="showNum"
              label="购买数量"
              align="center"
              width="80">
      </el-table-column>
      <el-table-column
              prop="giveNum"
              :formatter="showNum"
              label="赠送数量"
              align="center"
              width="80">
      </el-table-column>
      <el-table-column
              prop="buyPrice"
              :formatter="fen2Yuan"
              label="实付金额(元)"
              align="center"
              width="110">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { orderDetail } from "@/api/api.verify.js"
import Pagination from '@/components/Pagination'
export default {
  name: 'OrderDetail',
  data() {
    return {
      btnPower:JSON.parse(localStorage.getItem('btnList')),//按钮权限
      listLoading: true,
      orderId:null,//订单ID
      orderInfoList:[],//订单信息
    }
  },
  created() {
    this.getStart()
  },
  methods: {
    getStart(){
      this.orderId=this.$route.query.orderId
      this.getOrderDetail()
    },
    getOrderDetail(){//订单详情列表
      let _this=this
      let data={}
      data.orderId=this.orderId
      this.listLoading = true
      orderDetail(data).then(d=>{
        _this.orderInfoList=d.data
      }).finally(d=>{
        _this.listLoading = false
      })
    },

    shopTypes(row, column, cellValue, index) {//商品类型转换
      let type = row.form;
      if (type == 10) {
          return '标准';
      } else if (type == 20) {
          return '散装';
      } else {
          return type;
      }
    },
    fen2Yuan(row, column, cellValue, index) {
      return cellValue / 100;
    },
    showNum(row, column, cellValue, index) {
      var form = row.form;
      if (form == 20) {
          return cellValue + "（克）";
      }
      return cellValue;
    },
  },
}
</script>
